<template>
  <div>
    <div class="order-confirm">
        <div class="order-s">
          <div class="adress">
            <div class="conf-step">
              <span>收件人：</span>
              <span>赵亚华</span>
              <span>18581875883</span>
            </div>
            <div class="conf-detail">
              <i class="b1"></i>
              <span>收获地址：</span>
              <span>北京市 市辖县 延庆县北京市</span>
              <i class="b2"></i>
            </div>
            <div class="adr-line"></div>
          </div>

          <div class="wrag">
          <div class="order-con">  <!-- 商品列表 -->

              <div class="c-hd"><i class="icon-dp"></i> <span>乐村淘翼城特色馆</span></div>
              <div class="c-cont">
                <img src="https://img.lecuntao.com/data/upload/shop/store/goods/556/2015/11/09/556_05004033033340342_360.jpg" alt="">
                <div class="sitem-m">
                  <div class="sitem-txt">【特色馆】翼城苹果礼盒装  精品12个大果 脆甜多汁</div>
                  <div class="msg">
                    <div class="price">
                      <i>￥</i>
                      <span>98.00</span>
                    </div>
                    <div class="number">
                      <i>x</i>
                      <span>1</span>
                    </div>
                  </div>
                </div>
              </div>
         
         
         
          </div>
          <div class="c-freight">
            <div class="fr-txt">
              <span>配送</span>
              <div class="monkey">
                <span>快递：</span>
                <span>10.00</span>
                <span>元</span>
              </div>
            </div>
            <div class="fr-msg">
              <p>特色馆商品由第三方物流直接发到你手中!</p>
            </div>
          </div>
          <div class="cl-c">
            <div class="lymsg">买家留言</div>
            <input type="text" placeholder="选填:对本次交易的说明(建议填写已和卖家协商一致的内容)">
          </div>
          <div class="c-total">
            <div class="floatt">
               <div class="ct-z">
                 <span>共&nbsp;</span>
                 <span>1</span>
                 <span>&nbsp;件</span>
               </div>
               <div class="ct-y">
                 <span>合计：</span>
                 <span class="red">￥</span>
                 <span class="red">98.00</span>
               </div>
            </div>
           </div>
          </div>
        </div>
        <div class="order-x">
          <div class="order-wrag">
            <div class="order-z">
              <span>合计：</span>
              <span class="red">￥</span>
              <span class="red">153</span>
            </div>
            <div class="order-y">提交订单</div>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
export default {

}
</script>

<style lang="scss" scoped>
  body{
        background: #f0f0f0;
    }
  .order-confirm{
    .order-s{
      .adress{
        height: 100px;
        .conf-step{
          height:50px;
          background:whitesmoke;
          display: flex;
          justify-content: space-around;
          align-items: center;
          span{
            font-size: 14px;
            color:#666;
          }
        }
        .conf-detail{
          height:40px;
          background:whitesmoke;
          display: flex;
          justify-content: space-around;
          align-items: center;
          i,span{
            font-size: 14px;
            color:#666;
          }
          .b1{
            height: 14px;
            width: 14px;
            background:url("https://m.lecuntao.com/resource/images/confirm/icon_qrdd_address.png?lv=4154012062") no-repeat center center;
            background-size: 100% 100%;
          }
          .b2{
            height: 14px;
            width: 14px;
            background:url("https://m.lecuntao.com/resource/images/confirm/icon_wodedingdanjiantou.png?lv=0401d3e1e1") no-repeat center center;
            background-size: 100% 100%;
          }
        }
        .adr-line{
          height:5px;
          background:url("https://m.lecuntao.com/resource/images/confirm/img_addressbar.png?lv=dd2df97889") no-repeat center center;
          background-size: 100% 100%;
        }
      }
       .wrag{
         margin:10px 0px;
         border-top:1px solid #f0f0f0;
         border-bottom:1px solid #f0f0f0;
      .order-con{
        .c-hd{
          height:45px;
          display:flex;
          align-items: center;
          background:white;
          .icon-dp{
            display: block;
            margin: 0px 15px;
            width: 14px;
            height:14px;
            background:url("https://m.lecuntao.com/resource/images/confirm/icon_wodedingdanshangdian.png?lv=fa0c49b489") no-repeat center center;
            background-size: 100% 100%;
          }
          span{
            font-size: 16px;
            color:#333;
          }
        }
       
        .c-cont{
          background:whitesmoke;
          display:flex;
          align-items: center;
          img{
            width:55px;
            height:55px;
            margin:10px;
          }
          .sitem-m{
            .sitem-txt{
              font-size: 16px;
              padding-right:5px;
            }
            .msg{
              display:flex;
              justify-content: space-between;
              align-items: center;
              height: 20px;
              i,span{
                font-size: 16px;
                margin:0px 3px;
              }
              .price{
                line-height: 100%;
              }
              .number{
                line-height: 100%;
              }
            }
          }
        }
      }
      .c-freight{
        background-color: #fff;
        width:100%;
        .fr-txt{
          display:flex;
          justify-content: space-between;
          align-items: center;
          width:90%;
          margin: 0 auto;
          .monkey{
            display:flex;
            justify-content: space-between;
            align-items: center;
            color:#999;
          }
          span{
            font-size: 16px;
          }
        }
        .fr-msg{
          p{
            color:#999;
            font-size: 14px;
            padding: 10px;
          }
        }
      }
      .cl-c{
        background-color: #fff;
        border-top:1px solid #f0f0f0;
        border-bottom:1px solid #f0f0f0;
        font-size: 16px;
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .lymsg{
          margin:10px;
          width: 100px;
        }
        input{
              border:none;
              width: 100%;
              height: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              display: block;
              font-size: 0.3rem;
              outline-style: none ;
        } 
      }
      .c-total{
          background-color: #fff;
        height:50px;
        .floatt{
          float:right;
          display: flex;
          font-size: 14px;
        }
        .ct-z{
          margin: 10px;
        }
        .ct-y{
          margin: 10px;
            .red{
              color:red;
            }
        }
      }
    }
    }
    .order-x{
      height:50px;
      width: 100%;
      position: fixed;
      bottom:0;
      left: 0;
      .order-wrag{
        float: right;
        display:flex;
        font-size: 16px;
        height: 100%;
          .order-z{
            display: flex;
            justify-content: space-around;
            align-items: center;  
            margin: 0px 8px;
            .red{
              color:red;
            }
          }
          .order-y{
            background-color: #f81234;
            display: flex;
            align-items: center; 
            padding-left: 8px; 
            width:75px;
            color:white;
            border: 1px solid #f0f0f0;
          }
      }
    }
  }
</style>